<template>
	<u-cell-group>

		<u-cell-item title="任务类型" :value="typeStr" :arrow="false" :border-bottom="false"></u-cell-item>
		<u-cell-item title="随访医院" :value="detailInfos.orgName" :arrow="false" :border-bottom="false"></u-cell-item>
		<u-cell-item title="随访时间" :value="detailInfos.followDate" :arrow="false" :border-bottom="false"></u-cell-item>
		<u-cell-item title="随访病人" :value="detailInfos.patientName" :arrow="false" :border-bottom="false"></u-cell-item>
		<u-cell-item title="联系电话" :value="detailInfos.patientTel" :arrow="false" :border-bottom="false"></u-cell-item>
		<u-cell-item title="任务状态" :value="detailInfos.taskStatus" :arrow="false"></u-cell-item>
	</u-cell-group>
	<view class="question" v-if="questionList.length != 0">
		<view class="question_title">
			随访问题
		</view>
		<view class="question_one" v-if="currentQues.itemClass == '2'">
			<view class="title">
				{{ currentIndex + 1 }}.{{ currentQues.itemTitle }}
			</view>
			<u-checkbox-group @change="checkboxGroupChange" :wrap="true" active-color="#0FC6C2">
				<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index"
					:name="item.itemOptionRecord">{{item.itemOptionRecord}}</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="question_two" v-if="currentQues.itemClass == '0'">
			<view class="title">
				{{ currentIndex + 1 }}.{{ currentQues.itemTitle }}
			</view>
			<view class="decs">
				<u-input type="textarea" :border="true" :height="500" :auto-height="true" placeholder="请输入内容描述"
					v-model="currentQues.itemContent"></u-input>
			</view>
		</view>
		<view class="question_tree" v-if="currentQues.itemClass == '1'">
			<view class="title">
				{{ currentIndex + 1 }}.{{ currentQues.itemTitle }}
			</view>
			<u-radio-group @change="radioGroupChange" :wrap="true" v-model="currentRadioAnswer" active-color="#0FC6C2" :multiple="true">
				<u-radio @change="radioChange" v-for="(item, index) in list" :key="item.itemOptionRecord" :name="item.itemOptionRecord" :disabled="false"> 
					{{item.itemOptionRecord}} 
				</u-radio>
			</u-radio-group>
		</view>

	</view>

	<view class="tabbar">
		<view :class="currentIndex == 0 ? 'btn' : 'active_btn'" @click="prev">
			上一步
		</view>
		<view class="page">
			{{ currentIndex + 1 }} / {{ questionList.length }}
		</view>
		<view :class="currentIndex + 1 == questionList.length ? 'btn' : 'active_btn'" @click="next">
			下一步
		</view>
		<view :class="(currentIndex + 1 != questionList.length || detailInfos.taskStatus == '已结束') ? 'noSave' : 'save'" @click="save">
			保存
		</view>
	</view>
	
	<view class="footer_view">
		<ym-footer></ym-footer>
	</view>
</template>


<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getFollowTaskDetail,
		saveFollowRecord
	} from '../../apis/api.js'
import route from '../../uni_modules/vk-uview-ui/libs/function/route.js';

	const followMainId = ref()
	const typeStr = ref()

	const currentIndex = ref(0)

	const detailInfos = ref({
		taskType: '',
		followMainId: '',
		orgName: '',
		followDate: '',
		patientName: '',
		patientId: '',
		patientTel: '',
		taskStatus: '',
		followTempId: ''
	})

	const questionList = ref([])
	const currentQues = ref()
	const currentRadioAnswer = ref()

	const list = ref([])
	// 接收传参
	onLoad((e) => {
		console.log('随访任务' + e)
		followMainId.value = e.followMainId
	})

	onMounted(() => {
		getSfTaskInfo(followMainId.value)
	})

	// 获取随访任务详情
	const getSfTaskInfo = async (followMainId) => {
		uni.showLoading({

		})
		try {
			const res = await getFollowTaskDetail({
				followMainId: followMainId
			})
			console.log(res.data)
			detailInfos.value = res.data
			questionList.value = res.data.taskStatus == '已结束' ? res.data.patientFollowItems : res.data.followQuestionList
			currentQues.value = questionList.value[0]
			getCurrentTypeString(detailInfos.value.taskType)
		} catch (err) {
			console.log(err.message)
		}
	}

	// 获取当前任务类型名称
	const getCurrentTypeString = (type) => {
		typeStr.value = type == '2' ? "随访任务" : "未知"
	}

	// 多选
	const checkboxChange = (e) => {
		console.log(e);
	}
	// 选中任一checkbox时，由checkbox-group触发
	const checkboxGroupChange = (e) => {
		console.log(e);
	}
	// 单选
	const radioGroupChange = (e) => {
		console.log(e)
		// for (let i = 0; i < list.value.length; i++) {
		// 	if (currentQues.value.itemOptionRecordList[i].itemOptionRecord == e) {
		// 		currentQues.value.itemOptionRecordList[i].checked = true
		// 	} else {
		// 		currentQues.value.itemOptionRecordList[i].checked = false
		// 	}
		// }
	}
	const radioChange = (e) => {
		console.log(e)
		for (let i = 0; i < list.value.length; i++) {
			if (currentQues.value.itemOptionRecordList[i].itemOptionRecord == e) {
				currentRadioAnswer.value = currentQues.value.itemOptionRecordList[i].itemOptionRecord
				currentQues.value.itemOptionRecordList[i].checked = true
			}else {
				currentQues.value.itemOptionRecordList[i].checked = false
			}
		}
	}

	// 上一步
	const prev = () => {
		questionList.value[currentIndex.value] = currentQues.value
		currentIndex.value = currentIndex.value - 1
		currentQues.value = questionList.value[currentIndex.value]
		changeCurrentQuestionData()
	}
	// 下一步
	const next = () => {
		questionList.value[currentIndex.value] = currentQues.value
		currentIndex.value = currentIndex.value + 1
		currentQues.value = questionList.value[currentIndex.value]
		changeCurrentQuestionData()
	}
	// 修改当前问题的数据模型
	const changeCurrentQuestionData = () => {
		// active.value = currentQues.value.itemClass == 0 ? '2' : '1'
		if (currentQues.value.itemClass != 0) {
			list.value = currentQues.value.itemOptionRecordList
			for (var index = 0; index < list.value.length; index++) {
				if (detailInfos.value.taskStatus == '已结束') {
					list.value[index].checked = true
					list.value[index].disabled = true
				}
			}
			if (currentQues.value.itemClass == 1) {
				// 单选
				for (var index = 0; index < list.value.length; index++) {
					let ques = list.value[index]
					if (ques.checked == true) {
						currentRadioAnswer.value = ques.itemOptionRecord
					}
				}
			}
		}
	}

	// 保存
	const save = async () => {
		var followItems = []
		for (let i = 0; i < questionList.value.length; i ++) {
			var dict = {}
			if (i == currentIndex.value) {
				dict = currentQues.value
			}else {
				dict = questionList.value[i]
			}
			var itemsAnswer = []
			if (dict.itemClass == 1) {
				// 单选
				for (let i = 0; i < dict.itemOptionRecordList.length; i ++) {
					if (dict.itemOptionRecordList[i].checked == true) {
						itemsAnswer = [{
							itemOptionRecord: dict.itemOptionRecordList[i].itemOptionRecord
						}]
					}
				}
			}
			if (dict.itemClass == 2) {
				// 多选
				for (let i = 0; i < dict.itemOptionRecordList.length; i ++) {
					if (dict.itemOptionRecordList[i].checked == true) {
						itemsAnswer.push({
							itemOptionRecord: dict.itemOptionRecordList[i].itemOptionRecord
						})
					}
				}
			}
			let para = {
				itemTitle: dict.itemTitle,
				itemContent: dict.itemContent,
				itemClass: dict.itemClass,
				followItemOptionList: itemsAnswer
			}
			followItems.push(para)
		}
		try{
			const res = await saveFollowRecord({
				followMainId: detailInfos.value.followMainId,
				patientId: detailInfos.value.patientId,
				docCode: detailInfos.value.docCode,
				followItemList: followItems
			})
			console.log(res.data)
			uni.navigateBack()
		}catch(e){
			uni.showToast({
				title:'网络有问题',
				icon:'error'
			})
		}
		
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-cell {
		padding: 14rpx 32rpx !important;
	}

	::v-deep .u-checkbox {
		margin-top: 24rpx !important;
	}

	::v-deep .u-cell_title {
		font-size: 28rpx !important;
		color: #4E5969 !important;
	}

	::v-deep .u-cell__value {
		color: #1D2129 !important;
		font-size: 28rpx !important;
	}

	.question {
		width: 90%;
		margin: 0 auto;

		.question_title {
			margin: 40rpx 0 48rpx 0;
			font-size: 40rpx;
			font-weight: bold;
		}

		.question_two {
			.title {
				margin-bottom: 24rpx;
			}

			.desc {}
		}
	}

	.tabbar {
		width: 100%;
		position: fixed;
		bottom: 180rpx;
		left: 0;
		height: 112rpx;
		background-color: #fff;
		z-index: 1000;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.btn {
			width: 148rpx;
			height: 64rpx;
			border-radius: 40rpx;
			border: 2rpx solid #C9CDD4;
			font-size: 28rpx;
			color: #C9CDD4;
			line-height: 64rpx;
			text-align: center;
			pointer-events: none;
		}

		.active_btn {
			width: 148rpx;
			height: 64rpx;
			border-radius: 40rpx;
			border: 2rpx solid #0FC6C2;
			color: #0FC6C2;
			font-size: 28rpx;
			line-height: 64rpx;
			text-align: center;
		}

		.noSave {
			width: 148rpx;
			height: 64rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #fff;
			line-height: 64rpx;
			background-color: #C9CDD4;
			text-align: center;
			pointer-events: none;
		}

		.save {
			width: 148rpx;
			height: 64rpx;
			border-radius: 40rpx;
			color: #fff;
			background-color: #0FC6C2;
			font-size: 28rpx;
			line-height: 64rpx;
			text-align: center;
		}

	}
	.footer_view {
		position: absolute;
		bottom: 10rpx;
		width: 100%;
	}
</style>